<template>
    <div id="detail">
        <div slot="header" class="clearfix">
                <div class="p_title">
                    <el-button type='text' @click="$router.go(-1)"><i class="el-icon-back"></i></el-button>
                    <span class="p_title">订单详情</span>
                </div>
        </div>
            <div class="p_detail">
                <div class="test">
                    <el-tag size="mini">订&nbsp;单&nbsp;号</el-tag>
                    <span class="detail_span">{{ orderData.orderId }}</span>
                </div>

                <div>
                    <el-tag size="mini">订&nbsp;单&nbsp;人</el-tag>
                    <span class="detail_span">{{ orderData.recipient }}</span>
                </div>

                <div>
                    <el-tag size="mini">创建时间</el-tag>
                    <span class="detail_span">{{ dateFormat(orderData.create_time) }}</span>
                </div>
                <div>
                    <el-tag size="mini">订单状态</el-tag>
                    <span class="detail_span">
                        {{statusArr[orderData.status]}}
                    </span>
                </div>

                <div>
                    <el-tag size="mini">商品价格</el-tag>
                    <span class="detail_span">{{ '￥' + orderData.allPrice }}元</span>
                </div>

                <div>
                    <el-tag size="mini">支付方式</el-tag>
                    <span class="detail_span">
                        {{paymentArr[orderData.paymentMethod]}}
                    </span>
                </div>
                <el-divider><i class="el-icon-shopping-cart-full"></i></el-divider>
                <el-table
                        :data="orderData.details"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="商品名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="imgs"
                            label="商品图片"
                    >
                        <template slot-scope="scope">
                            <el-image fit="scale-down" v-for="(img,index) in scope.row.imgs"  :src="img" :key="index"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="info"
                            label="商品信息">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="单价"
                            width="100">
                        <template slot-scope="scope">
                            {{ '￥' + scope.row.price }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="数量"
                            width="100">
                    </el-table-column>
                </el-table>
            </div>

    </div>
</template>
<script>
import {getorderinfo} from "../api/index"
export default {
    data(){
        return{
            orderData:[],
            statusArr:{
                    1: '未支付',
                    2: '已支付',
                    3: '以取消'
            },
            paymentArr: {
                1: '支付宝',
                2: '微信',
                3: '银联'
            },
        }
    },
    async mounted(){
    
        let {data}=await getorderinfo({value:this.$route.params.id})
        this.orderData=data.data
    },
    methods:{
        dateFormat: function (time) {
                var date = new Date(time);
                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            },
    }
}
</script>
<style  scoped>
#detail .el-button,.p_title{
    font-size: 20px;
    margin-right: 10px;
}

.el-tag--mini{
        margin-top: 10px;
        margin-right: 10px;       
}
.detail_span{
    font-size: 14px;
}
</style>